﻿@(Html.DevExtreme().TreeMap()
    .DataSource(new[] {
        new { name = "Africa", items = new[] {
                new { value = 21324000, name = "Lagos", country = "Nigeria" },
                new { value = 9735000, name = "Kinshasa", country = "Democratic Republic of the Congo" },
                new { value = 9278441, name = "Cairo", country = "Egypt" }
            }
        },
        new { name = "Asia", items = new[] {
                new { value = 24256800, name = "Shanghai", country = "China" },
                new { value = 23500000, name = "Karachi", country = "Pakistan" },
                new { value = 21516000, name = "Beijing", country = "China" },
                new { value = 16787941, name = "Delhi", country = "India" },
                new { value = 15200000, name = "Tianjin", country = "China" }
            }
        },
        new { name = "Australia", items = new[] {
                new { value = 4840600, name = "Sydney", country = "Austraila" },
                new { value = 4440000, name = "Melbourne", country = "Austraila" }
            }
        },
        new { name = "Europe", items = new[] {
                new { value = 14160467, name = "Istanbul", country = "Turkey" },
                new { value = 12197596, name = "Moscow", country = "Russia" },
                new { value = 8538689, name = "London", country = "United Kingdom" },
                new { value = 5191690, name = "Saint Petersburg", country = "Russia" },
                new { value = 4470800, name = "Ankara", country = "Turkey" },
                new { value = 3517424, name = "Berlin", country = "Germany" }
            }
        },
        new { name = "North America", items = new[] {
                new { value = 8874724, name = "Mexico City", country = "Mexico" },
                new { value = 8550405, name = "New York City", country = "United States" },
                new { value = 3884307, name = "Los Angeles", country = "United States" },
                new { value = 2808503, name = "Toronto", country = "Canada" }
            }
        },
        new { name = "South America", items = new[] {
                new { value = 11895893, name = "São Paulo", country = "Brazil" },
                new { value = 8693387, name = "Lima", country = "Peru" },
                new { value = 7776845, name = "Bogotá", country = "Colombia" },
                new { value = 6429923, name = "Rio de Janeiro", country = "Brazil" }
            }
        }
    })
    .Title("The Most Populated Cities by Continents")
    .Tooltip(t => t
        .Enabled(true)
        .Format(Format.Thousands)
        .CustomizeTooltip(@<text>
            function(arg) {
                var data = arg.node.data,
                    result = null;

                if (arg.node.isLeaf()) {
                    result = "<span class='city'>" + data.name + "</span> (" +
                        data.country + ")<br />Population: " + arg.valueText;
                }

                return {
                    text: result
                };
            }
        </text>))
    .Size(s => s.Height(500))
)
